<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style type="text/css">
        
    </style>
</head>
<body>
    <header class="aui-bar aui-bar-nav" id="header" style="padding-top:20px; position:fixed;">
        <div class="aui-title">用户中心</div>
        <div class="aui-pull-right">
            <a class="aui-btn aui-iconfont aui-icon-refresh" href=""></a>
        </div>
    </header>
    <div id="header-bottom"></div>
    <section class="aui-content aui-refresh-content aui-padded-t-15">
        <!-- 用户信息 -->
        <div class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-media-list">
                <li class="aui-list-item aui-list-item-middle">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width: 3rem;">
                            <img src="../image/login_logo.png" class="aui-img-round aui-list-img-sm">
                        </div>
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-18" id="id-username"></div>
                            </div>
                            <div class="aui-list-item-text aui-font-size-12">
                                <span id="id-email"></span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <!-- 账号与安全 -->
        <div class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-list-in">
                <li class="aui-list-item aui-list-item-middle" onclick="alert('弹出账号与安全');">
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">账号与安全</div>
                    </div>
                </li>
            </ul>
        </div>

        <!-- 记账相关 -->
        <div class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-list-in">
                <li class="aui-list-item aui-list-item-middle" onclick="alert('年度统计');">
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">年度统计</div>
                    </div>
                </li>
                <li class="aui-list-item aui-list-item-middle" onclick="openWin('class_win');">
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">分类管理</div>
                    </div>
                </li>
                <li class="aui-list-item aui-list-item-middle" onclick="openWin('calculator_win');">
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">速算练习</div>
                    </div>
                </li>
            </ul>
        </div>

        <!-- APP处理 -->
        <div class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-list-in">
                <!-- 检查更新 -->
                <li class="aui-list-item aui-list-item-middle" onclick="cheakUpdata();">
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">检查更新</div>
                    </div>
                </li>
                <!-- 清除缓存 -->
                <li class="aui-list-item aui-list-item-middle" onclick="clearCache();">
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">清除缓存</div>
                        <div class="aui-list-item-right" id="id-cache-size">正在计算</div>
                    </div>
                </li>
                <!-- 关于我们 -->
                <li class="aui-list-item aui-list-item-middle" onclick="openWin('about_win');">
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">关于我们</div>
                    </div>
                </li>
            </ul>
            <p class="aui-list-item-text aui-font-size-12">
                &nbsp;&nbsp;&nbsp;&nbsp;当APP运行出现问题可以尝试清除缓存并重启应用。
            </p> 
        </div>

        <!-- 退出登录 -->
        <div class="aui-content aui-margin-b-15 aui-padded-l-10 aui-padded-r-10">
            <div class="aui-btn aui-btn-danger aui-btn-block aui-btn-sm" onclick="goLogout();">
                退出登录
            </div>
        </div>
    </section>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js" ></script>
<script type="text/javascript">
    var user;
    var uid = 0;
    apiready = function(){
        api.parseTapmode();
        //不支持沉浸式效果
        if (!api.statusBarAppearance) {
            $api.byId('header').style.paddingTop = 0;
        }
        //顶部导航栏高度抵消
        $api.byId('header-bottom').style.marginTop = $api.offset($api.byId('header')).h + 'px';

        //获取用户信息
        user = $api.getStorage('user');
        uid = user.uid;
        $api.byId('id-username').innerHTML = user.username;
        getUserInfo();

        //计算缓存大小
        api.getCacheSize(function(ret) {
            var size = ret.size;
            var unit = 'KB';
            if (size <= 0) {
                size = 0;
            } else if (size < 100000) {
                size = size / 1000;
            } else {
                size = size / 1000 / 1000;
                unit = 'MB';
            }
            $api.byId('id-cache-size').innerHTML = '' + size.toFixed(2) + unit;
        });
    }

    /** 获取用户信息 */
    function getUserInfo() {
        api.ajax({
            url: 'http://qxu1192050221.my3w.com/xxjzApp/index.php/Home/Api/user',
            method: 'post',
            data: {
                values: { 
                    uid: uid
                }
            }
        },function(ret, err){
            if (ret) {
                // alert( JSON.stringify( ret ) );
                if (ret['uid'] == uid) {
                    $api.byId('id-username').innerHTML = ret.username;
                    $api.byId('id-email').innerHTML = ret.email;
                } else {
                    api.alert({
                        title: '重新登录',
                        msg: '登录验证已过期，请重新登录。',
                    }, function(ret, err){
                        goLogout();
                    });
                }
            } else {
                alert( JSON.stringify( err ) );
            }
        });

    }

    /** 检查更新命令 */
    function cheakUpdata() {
        setTimeout(function(){
            api.toast({
                msg:'当前为最新版本'
            });
        },500);
    }

    /** 退出登录命令 */
    function goLogout() {
        api.confirm({
            title: '退出登录',
            msg: '您确定要退出登录吗?',
            buttons: ['退出', '取消']
        }, function(ret, err) {
            if (ret && ret.buttonIndex === 1) {
                api.sendEvent({
                    name: 'xxjzLogout',
                    extra: {
                        value: 'xxjzLogout'
                    }
                });
            }
        });
    }

    /** 清除缓存命令 */
    function clearCache() {
        $api.byId('id-username').innerHTML = user.username;
        $api.byId('id-email').innerHTML = '';
        $api.byId('id-cache-size').innerHTML = '0.00KB';
        getUserInfo();
        api.clearCache(function(){
            api.confirm({
                title: '清除完成',
                msg: '是否要重启应该?',
                buttons: ['重启', '取消']
            }, function(ret, err) {
                if (ret && ret.buttonIndex === 1) {
                    api.rebootApp();
                }
            });
        });
    }

    /** 打开指定窗体 */
    function openWin(name){
        api.openWin({
            name: ''+name+'',
            url: ''+name+'.html',
            slidBackEnabled: true,
            slidBackType: 'edge',
            animation: {
                type: 'movein',
                subtype: 'from_bottom'
            },
            // softInputMode: 'pan',
            delay: 100
        });
    }

</script>
</html>